<template>
  <ElDatePicker
    class="fa-date-fill-input"
    v-model.trim="data.value"
    :format="formatter.format"
    :value-format="formatter.format"
    :placeholder="formatter.label"
    clearable
  />
</template>

<script lang="ts">
import { defineComponent, toRef } from 'vue'
import { Widget } from '@/models'
import { DateFormatList } from '@/types'
import useDateFormat from './useDateFormat'

/** 日期填写 */
export default defineComponent({
  name: 'FaDateFill',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    const data = toRef(props, 'data')

    return {
      formatter: useDateFormat(data),

      DateFormatList
    }
  }
})
</script>

<style lang="scss">
.fa-widget-fill .fa-date-fill-input.el-date-editor {
  width: 100%;
}
</style>
